<template>
  <div class="hello">
    <App></App>
    <x-header>我的接口</x-header>

    <!--搜索区域-->
    <search
      position="absolute"
      auto-scroll-to-top
      top="46px"
      @on-submit="onSubmit"
      ref="search"></search>

    <!--列表-->
    <panel header="接口列表" :footer="apiListFooter" :list="apiList" :type="apiListType" @on-click-footer="loadApi"></panel>

    <!-- 排序 弹出选择框-->
    <div v-transfer-dom>
      <popup v-model="sortIsShow">
        <popup-header
          left-text="取消" right-text="确定" title="请选择"
          @on-click-left="sortIsShow = false"
          @on-click-right="sortIsShow = false"></popup-header>
        <group gutter="0">
          <radio :options="sortOptions" :value="sortChecked"></radio>
        </group>
      </popup>
    </div>

    <!-- 分类 弹出选择框-->
    <div v-transfer-dom>
      <popup v-model="catalogIsShow">
        <popup-header
          left-text="取消" right-text="确定" title="请选择"
          @on-click-left="catalogIsShow = false"
          @on-click-right="catalogIsShow = false"></popup-header>
        <group gutter="0">
          <radio :options="catalogOptions" :value="catalogChecked"></radio>
        </group>
      </popup>
    </div>

    <!--底部操作栏-->
    <tabbar style="position: fixed">
      <tabbar-item @on-item-click="showSort()">
        <img slot="icon" src="../../assets/images/tabbar/sort.png">
        <span slot="label" style="color:#666">排序</span>
      </tabbar-item>
      <tabbar-item @on-item-click="showCatalog()">
        <img slot="icon" src="../../assets/images/tabbar/filter.png">
        <span slot="label" style="color:#666">分类</span>
      </tabbar-item>
    </tabbar>

  </div>
</template>
<script>
  import App from '../../App'
  import { Tabbar, TabbarItem, Group, Cell, XHeader, Search, PopupHeader, Popup, TransferDom, Radio, Panel } from 'vux'
  // import Vue from 'vue'

  // Vue.use(myTabbar)

  export default {
    name: 'ApiMy',
    directives: {
      TransferDom
    },
    components: {
      App,
      XHeader,
      Search,
      Tabbar,
      TabbarItem,
      Group,
      Cell,
      PopupHeader,
      Popup,
      TransferDom,
      Radio,
      Panel
    },
    data () {
      return {
        // 底部弹框
        sortIsShow: false,
        catalogIsShow: false,
        sortOptions: [{key: 1, value: '默认排序'}, {key: 2, value: '调用量'}],
        sortChecked: 1,
        catalogOptions: [{key: 1, value: '全部'}, {key: 2, value: '水利'}, {key: 3, value: '电力'}, {key: 4, value: '住建'}, {key: 5, value: '桥梁'}],
        catalogChecked: 1,
        // 列表类型
        apiListType: '5',
        apiList: [
          {
            src: 'http://placeholder.qiniudn.com/60x60/3cc51f/ffffff',
            fallbackSrc: 'http://placeholder.qiniudn.com/60x60/3cc51f/ffffff',
            title: '标题一',
            desc: '由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。',
            url: {
              path: '/apiDetail?id=1',
              replace: false
            },
            meta: {
              source: '水利',
              date: '2018-06-06',
              other: '991次'
            }
          },
          {
            src: 'http://placeholder.qiniudn.com/60x60/3cc51f/ffffff',
            title: '标题二',
            desc: '由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。',
            url: {
              path: '/apiDetail?id=2',
              replace: false
            },
            meta: {
              source: '水利',
              date: '2018-06-06',
              other: '991次'
            }
          }],
        apiListFooter: {
          title: '<div style="text-align: center">更多</div>'
        }
      }
    },
    methods: {
      // 搜索
      onSubmit () {

      },
      // 显示排序
      showSort () {
        this.sortIsShow = true
      },
      // 显示分类
      showCatalog () {
        this.catalogIsShow = true
      },
      // 加载api
      loadApi () {
        var item = {
          src: 'http://placeholder.qiniudn.com/60x60/3cc51f/ffffff',
          title: '标题二',
          desc: '由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。',
          url: {
            path: '/apiDetail?id=3',
            replace: false
          },
          meta: {
            source: '水利',
            date: '2018-06-06',
            other: '991次'
          }
        }
        this.apiList.push(item)
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  h1, h2 {
    font-weight: normal;
  }
  ul {
    list-style-type: none;
    padding: 0;
  }
  li {
    display: inline-block;
    margin: 0 10px;
  }
  a {
    color: #42b983;
  }
</style>

